<!-- 登录后跳转是个有权限的页面，登录成功了有token了才允许被访问，否则直接导航回登录页面 -->
<template>
  <!-- 登录后-左边侧边栏组件 -->
  <el-container class="home_container">
    <!-- 我是头部导航栏 -->
    <el-header>
      <div class="logoP">
        <img src="../assets/homeLogo.png" alt="管理系统导航logo">
        <span>电商后台管理系统</span>
      </div>
      <el-button type="info" round @click="logout">退出</el-button>
    </el-header>
    <el-container>
      <!-- 我是左边菜单栏 -->
      <el-aside :width="collApse ? '64px' : '200px'">
        <div class="tog_but" @click="togBut">|||</div>
        <el-menu :unique-opened="true" :collapse="collApse" :collapse-transition="false" :router="true"
          :default-active="defaultActive" background-color="#333744" text-color="#fff" active-text-color="#409EFF">
          <!-- 一级菜单 -->
          <!---------------------- 问题 --------------------------------->
          <!--
            点开一个菜单，所有菜单都被点开；关闭一个菜单，所有都被关闭
            原因是 index 相同了，需要唯一，所以可以绑定它们自己唯一的id
            但是 index 只接收字符，而id为数值，所以直接在后面拼接一个空字符，转成字符型
          -->
          <el-submenu :index="mList.id+''" v-for="(mList,index) in MenusList" :key="mList.id" :class="[collApse?'':'li_width']">
            <!-- 一级菜单模板区域 -->
            <template slot="title">
              <!-- 图标（mlImg组件图标名数组，用循环出来的下标设置） -->
              <i :class="mlImg[mList.id]"></i>
              <!-- 文本 -->
              <span>{{mList.authName}}</span>
            </template>

            <!-- 二级菜单 -->
            <!-- 当 el-menu 开启了router为true时，会在激活导航时以 el-menu-item 的 index 作为 path 进行路由跳转 -->
            <el-menu-item :index="'/'+mLch.path" v-for="mLch in mList.children" :key="mLch.id"
              @click="menuItemBut('/'+mLch.path)">
              <!-- 二级菜单模板区域 -->
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-menu"></i>
                <!-- 文本 -->
                <span>{{mLch.authName}}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 我是右边内容栏 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  export default {
    data() {
      return {
        // 菜单列表对象
        MenusList: [],
        // 一级菜单图标组件名列表
        mlImg: {
          '125': 'el-icon-user-solid',
          '103': 'el-icon-warning',
          '101': 'el-icon-s-goods',
          '102': 'el-icon-s-order',
          '145': 'el-icon-s-data'
        },
        // 是否水平折叠收起菜单
        collApse: false,
        // 二级菜单高亮，被激活的二级菜单
        defaultActive: ''
      }
    },
    // 生命周期函数（钩子函数） created 在实例创建完成后被立即同步调用
    created() {
      this.getMenusList()
      this.defaultActive = this.$route.path
    },
    watch: {
      $route(to, from) {
        this.defaultActive = to.path
      }
    },
    methods: {
      // 退出按钮
      logout() {
        window.sessionStorage.clear();
        this.$router.push('/login');
      },
      // 获取左侧所有菜单
      async getMenusList() {
        // 因为请求返回的是Promise对象，太庞大，所以要用 await + async 简化
        const {
          data: res
        } = await this.$http.get('menus')
        // res.meta.msg 为情况：获取菜单列表成功 或 ...  ；$message.error 失败弹框组件与方法
        if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
        this.MenusList = res.data
      },
      // 菜单|||展开按钮
      togBut() {
        this.collApse = !this.collApse
      },
      // 二级菜单点击激活高亮
      menuItemBut(menuPath) {
        this.defaultActive = menuPath
        /*------------------------ 优化 --------------------------
        不要按照视频里的去除了二级菜单按钮的高亮，繁琐且有bug，后退路由后高亮不正常
        点击高亮：点击二级菜单回传路由，将传回的路由设置为激活变量值
        刷新当前高亮：随后在实例创建完成后的created()内获取当前路由，设置为激活变量值
        回退路由高亮：watch监听路由变化，将当前路由设置为激活变量值
        */
      },

    }



  };

</script>

<style lang="less" scoped>
  /* @import url("../assets/css/Home.less"); */

</style>
